<template>
  <div class="road">
    <Collapse v-model="activeNames">
      <CollapseItem v-for="(item, index) in list" :key="index" :name="index" :title="item.title">
        <div class="item" v-for="(child, cdx) in item.children" :key="cdx">
          <div class="sub-title">{{ child.subTitle }}</div>
          <RoadItem :gameType="LotterCodeEnum.jndssc" :type="child.type" :index="index" />
        </div>

        <template #right-icon>
          <div class="expand-icon" :class="{ isExpand: activeNames.includes(index) }" />
        </template>
      </CollapseItem>
    </Collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Collapse, CollapseItem } from 'vant'
import RoadItem from '@/components/road/components/normalSimple.vue'
import { LotterCodeEnum } from '@/enum'

const list = [
  {
    title: '特码路单',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
  {
    title: '第一球',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
  {
    title: '第二球',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
  {
    title: '第三球',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
  {
    title: '第四球',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
  {
    title: '第五球',
    children: [
      {
        subTitle: '大小路',
        type: 1,
      },
      {
        subTitle: '单双路',
        type: 2,
      },
    ],
  },
]

const activeNames = ref([0])
</script>

<style lang="less" scoped>
.road {
  height: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  scroll-behavior: smooth;

  :deep(.van-collapse) {
    &::after {
      display: none;
    }

    .van-collapse-item {
      margin-bottom: 5px;

      &::after {
        display: none;
      }
    }

    .van-collapse-item__title {
      align-items: center;
      padding: 0 11px 0 8px;
      background: linear-gradient(0deg, #2a2c5d, #2a2c5d);
      border: 1px solid rgba(59, 61, 110, 1);
      text-align: left;
      color: rgba(189, 196, 255, 1);
      box-sizing: border-box;
      border-radius: 4px;

      &::after {
        display: none;
      }
    }

    .van-collapse-item__content {
      margin-bottom: 0;
      padding: 0 4px;
      background-color: transparent;
    }

    .van-collapse-item__wrapper {
      margin-bottom: 8px;
    }

    .expand-icon {
      width: 9px;
      height: 9px;
      background: url('@/assets/img/bet/collapse_triangle.svg') center center no-repeat;
      background-size: contain;
      transition: transform 0.2s;

      &.isExpand {
        transform: rotate(180deg);
      }
    }
  }

  .sub-title {
    padding: 16px 0 6px;
    text-align: left;
    color: #fff;
  }
}
</style>
